<template>
  <div class="showpubliccontent-content">
    <div class="head-img-box">
      <van-image :src="staticpath+publicUserInfo.header" v-if="publicUserInfo.header">
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>
      <img src="~assets/img/headImg/defaultHead.jpg" v-else />
    </div>
    <div class="text-box">
      <p class="title-box">{{publicUserInfo.nickName}}</p>
      <p class="time-box">{{publicDynaTime }}</p>
      <p class="content-box">{{context}}</p>
    </div>
    <slot name="deletedynamic"></slot>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    publicUserInfo: {
      type: Object,
      default: () => {},
    },
    context: {
      type: String,
      default: () => "",
    },
    publicDynaTime: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      staticpath: localStorage.getItem("staticpath"),
    };
  },
};
</script>

<style scoped>
.showpubliccontent-content {
  margin: 0 20px 15px 15px;
  display: flex;
}
.head-img-box {
  height: 40px;
  width: 40px;
  border-radius: 40px;
  overflow: hidden;
  margin-right: 15px;
  text-align: center;
}
.head-img-box img {
  height: 40px;
  width: 40px;
}
.text-box {
  margin-top: 10px;
  flex: 1;
}
.title-box {
  font-size: 14px;
  font-weight: 550;
}
.time-box {
  margin-top: 5px;
  font-size: 12px;
  font-weight: normal;
}
.content-box {
  font-size: 13px;
  margin-top: 8px;
  line-height: 20px;
}
</style>